<!DOCTYPE html>
<html>

<head>
    <title>
        Download
    </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="下载中转" name="keywords" />
    <meta content="下载中转" name="description" />
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.16.0/axios.min.js"></script>
    <style type="text/css" scoped>
        body,
        html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-size: 62.5%;
            box-sizing: border-box;
            overflow: hidden;
            font-weight: 400 !important;
            background: whitesmoke;
            overflow: auto;
        }

        .uploadArea {
            float: left;
            overflow: auto;
            width: 50%;
            padding: 2rem;
            box-sizing: border-box;
            background-color: blue;
        }

        textarea {
            /*margin-left: 2rem;*/
            width: 80%;
            height: 15rem;
            box-sizing: border-box;
        }

        input {
            /* width:8rem ! important; */
            height: 3rem;
            margin-top: 1rem;
            margin-bottom: 0.5rem;
            text-align: center;
        }

        .buttonWay {
            display: flex;
            justify-content: center;
            margin-right: 2rem;
            width: 80%;
        }

        #buttonWay p {
            width: 8rem;
            height: 3rem;
            text-align: center;
            line-height: 3rem;
            margin-right: 1rem;
            box-sizing: border-box;
            border: 1px solid blue;
            background: aqua;
            border-radius: 5px;

        }

        .buttonWay p:hover {
            background: thistle !important;
        }

        #buttonWay>checkClass {
            background: blanchedalmond !important;
            color: white !important;
        }

        .downloadArea {
            float: right;
            overflow: auto;
            width: 50%;
            padding: 2rem;
            background-color: aqua;
            box-sizing: border-box;
        }

        .downloadArea p {
            font-size: 2rem;
            margin-top: 0.1rem;
            margin-bottom: 1rem;
        }

        .downloadArea span {
            text-align: center;
            line-height: 2rem;
            box-sizing: border-box;
            height: 2rem;
            margin-top: 0.1rem;
            display: inline-block;
            font-size: 1rem;
            width: 60%;
            background-color: cornsilk;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .downloadArea span div {
            flex-grow: 1;
            font-size: 2rem;
            overflow: hidden;
            max-lines: 1;
            text-emphasis: ;
        }

        .downloadArea span i, a {
            background-color: darkgrey;
            border-color: darkslategray;
            border-width: 1px;
            border-radius: 0.3rem;
            height: 90%;
            line-height: 125%;
            padding: 3px;
            box-sizing: border-box;
            margin-right: 0.2rem;
        }

        .downloadArea span i:nth-child(2) {
            color: red;
        }

        .downloadArea span i:hover, a:hover  {
            background: thistle !important;
        }
    </style>
    <script type="text/javascript">
        // let host = 'http://localhost:8000'
        let host = 'https://www.niraya.top'
        window.onload = function () {
            let globalbool = true;
            let totalData = new Vue({
                el: '#totalData',
                data: {
                    result_desc: '',
                    inputText: '',
                    inputPass: '',
                    filelist: [{ name: '123' }, { name: '456' }],
                },
                mounted() {
                    this.reload()
                },
                watch: {

                },
                methods: {
                    //格式化日期代码
                    dataFormat(date, fmt = 'YYYY-MM-DD HH:mm:ss') {
                        var o = {
                            'M+': date.getMonth() + 1,
                            'D+': date.getDate(),
                            'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12,
                            'H+': date.getHours(),
                            'm+': date.getMinutes(),
                            's+': date.getSeconds(),
                            'q+': Math.floor((date.getMonth() + 3) / 3),
                            'S': date.getMilliseconds()
                        }
                        var week = {
                            '0': '\u65e5',
                            '1': '\u4e00',
                            '2': '\u4e8c',
                            '3': '\u4e09',
                            '4': '\u56db',
                            '5': '\u4e94',
                            '6': '\u516d'
                        }
                        if (/(Y+)/.test(fmt)) {
                            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
                        }
                        if (/(E+)/.test(fmt)) {
                            fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '\u661f\u671f' : '\u5468') : '') + week[date.getDay() + ''])
                        }
                        for (var k in o) {
                            if (new RegExp('(' + k + ')').test(fmt)) {
                                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
                            }
                        }
                        return fmt
                    },


                    linkSubmit() {
                        let that = this
                        let address = host + '/api/downlink'
                        let params = {
                            pass: that.inputPass,
                            link: that.inputText,
                        }
                        // axios.defaults.headers.post['Content-Type'] = 'application/json'
                        axios.post(address, JSON.stringify(params))
                            .then(res => {
                                console.log(res)
                                that.result_desc = res.data
                            })
                            .catch(function (error) {
                                console.log(error);
                            });

                    },

                    reload() {
                        let that = this
                        let address = host + '/api/getServerfilelist'
                        axios.get(address)
                            .then(res => {
                                console.log(res)
                                let filelist = res.data.filelist.map(file => {
                                    return { name: file }
                                })
                                that.filelist = filelist
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    },

                    deleteSubmit(fileName){
                        let that = this
                        let address = host + '/api/deletefile'
                        let params = {
                            file: fileName,
                            pass: that.inputPass,
                        }
                        axios.get(address, {params: params})
                    }

                },
            })

        }
    </script>
</head>

<body>
    <div id='totalData' style="width:100%;height:100%;background-size:100%;">

        <div class="uploadArea">
            <input type="text" placeholder="请输入鉴权密码" v-model="inputPass">
            <textarea rows="10" cols="30" v-model="inputText" placeholder="请输入内容"></textarea>
            <div class="buttonWay" id="buttonWay">
                <p @click="linkSubmit">{{'提交下载'}}</p>
            </div>
            <p>{{this.result_desc}}</p>
        </div>

        <div class="downloadArea">
            <p @click="reload()">文件列表</p>
            <span v-for="(item, index) in filelist" :key="index">
                <div>{{item.name}}</div>
                <i @click="deleteSubmit(item.name)">删除</i>
                <a :href="'https://www.niraya.top/api/getfile?file='+ item.name + '&pass=' + inputPass">下载</a>
            </span>
        </div>
    </div>


</body>

</html>